import 'package:flutter/material.dart';
import '../../utils/base.dart';
import '../../widgets/xpage.dart';

import 'list/user_item.dart';

class UserManagerList extends StatelessWidget {
  const UserManagerList({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var mockData = [
      {
        "memberId": '001',
        "nickname": '戴安娜',
        "avatar":
            'https://wx4.sinaimg.cn/mw1024/e927d912ly1g5mixx8392j20u0140qd0.jpg',
        "point": 123123
      },
      {
        "memberId": '002',
        "nickname": '戴安娜',
        "avatar":
            'https://wx4.sinaimg.cn/mw1024/e927d912ly1g5mj23boucj20u01407c3.jpg',
        "point": 123123
      },
      {
        "memberId": '003',
        "nickname": '戴安娜',
        "avatar":
            'https://wx4.sinaimg.cn/mw1024/e927d912gy1g5h0souzrhj20u1143wkh.jpg',
        "point": 123123
      },
      {
        "memberId": '004',
        "nickname": '戴安娜',
        "avatar":
            'https://wx1.sinaimg.cn/mw1024/e927d912gy1g5epr80dm7j20u01hjn8z.jpg',
        "point": 123123
      },
      {
        "memberId": '005',
        "nickname": '戴安娜',
        "avatar":
            'https://wx2.sinaimg.cn/mw1024/e927d912gy1g4re3bh3byj21sc2ds7wh.jpg',
        "point": 123123
      },
      {
        "memberId": '006',
        "nickname": '戴安娜',
        "avatar":
            'https://wx1.sinaimg.cn/mw1024/e927d912ly1g4bdl97szaj20u00u0th5.jpg',
        "point": 123123
      },
      {
        "memberId": '007',
        "nickname": '戴安娜',
        "avatar":
            'https://wx4.sinaimg.cn/mw1024/e927d912gy1g2v9k4l4caj24802tckjo.jpg',
        "point": 123123
      },
    ];

    return XPage(
      appbar: PageAppBar(
        '会员管理',
        action: Image.asset('assets/icon-search.png', height: Design.px(50),),
        doAction: () => {},
      ),
      body: Container(
        child: GridView.count(
          //ListView嵌套GridView会报错，加此参数后可修正错误： https://segmentfault.com/q/1010000018145105/
          shrinkWrap: true,
          //每行3个
          crossAxisCount: 2,
          //水平子Widget之间间距
          crossAxisSpacing: Design.px(20),
          //垂直子Widget之间间距
          mainAxisSpacing: Design.px(20),
          // 中间间隔空白比例  https://blog.csdn.net/hao_m582/article/details/84108041
          childAspectRatio: 6 / 1,
          padding: EdgeInsets.all(Design.px(20)),

          children: mockData.map((item) {
            return UserItem(
              memberId: item['memberId'],
              avatar: item['avatar'],
              nickname: item['nickname'],
              point: item['point'],
            );
          }).toList(),
        ),
      ),
    );
  }
}
